<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-flip-mc">
      <input-normal label="间隔时间" v-model="commonAttr.intervalTime" @change="onChangeAttr"></input-normal>

      <el-button type="primary"  @click.stop="onAddItem" class="margin-left-right-16 margin-top-10"><el-icon><i class="jy-icon-plus"></i></el-icon>添加选项</el-button>
      <add-list-item :lists="lists" :onUpdateItem="onUpdateItem" :onDeleteItem="onDeleteItem"></add-list-item>

      <dropdown-normal  class="margin-top-10" :label="'字体'" :valLists="fontFamilys" v-model="styles.fontFamily" @change="onChangeAttr"></dropdown-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" :label="'字体颜色'" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" :label="'背景颜色'" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.lineHeight" :label="'行高'" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.letterSpacing" :label="'字距'" :max="20" :step="1" @change="onChangeAttr"></slider-normal>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import AddListItem from '@/views/components/add-list-item.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'

  import { editUtils } from '@/views/js/edit-utils'

  export default {
    name: "RightFlipMc",
    mixins: [editUtils],
    components: {
      RightTemplate,
      ColorNormal,
      DropdownNormal,
      SliderNormal,
      AddListItem,
      InputNormal,
    },
  }
</script>
